/**
 * 
 */
$(function(){
	
	
	var map = echarts.init(document.getElementById('map'));
	var fydm = "00";
	
	var convertData = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var colors = "#047f09";
			var dataItem = data[i];
			var toCoord = geoCoordMap[dataItem[0].name];
			var fromCoord = geoCoordMap[dataItem[1].name];
			if (fromCoord && toCoord&&fromCoord!=toCoord) {
				if(dataItem[0]["type"] == "0"){
					colors = "red";
				}
				res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],lineStyle:{normal:{color:colors,width:1,opacity:0.6,curveness:0.2}}});
			}
		}
		return res;
	};
	var createSeries = function(vname,_data){
		var series = 
			[
			 {name:vname,type:'lines',zlevel:1,lineStyle:{normal:{color:"black",width:0,curveness:0.2}},data:convertData(_data)},
			 {name:vname,type:'lines',zlevel:2,effect:{show:true,period:6,trailLength:0.1,loop:true,symbol:"pin",symbolSize:8},lineStyle:{normal:{color:"#047f09",width:1,opacity:0.6,curveness:0.2}},data:convertData(_data)}
			 ];
		return series;
	}
	
	JSUtils.loadAjax({
		url:basePath+"/welcome/loadCityByPro.do",
		success:function(data){
			loadMap(data);
		}
	})
	var loadMap = function(cityData){
		var cdata = [];
		var visualMap = false,max = 0;
		var city = "湖北";
		$.each(cityData,function(i,v){
			var point = (v['point']||'').split(',');
			geoCoordMap[v["name"]] = point;
			if(v.hasOwnProperty('value') && v['value'] >= 0) {
				if(max < v['value']) max = v['value'];
				visualMap = true;
			}
			if(v["ctype"] == "point"){
				point.push(-1);
				if(v["name"] == city){
					cdata.push($.extend(true,{'itemStyle':{'normal':{'color':"red"}}},v,{'value':point}));
				}else{
					cdata.push($.extend(true,{'itemStyle':{'normal':{'color':"#FFF"}}},v,{'value':point}));
				}
			}
		})
		$.getJSON(basePath+'/json/00.json?etc='+new Date().getTime(), function(datas) {
			//var data = [{name:"湖北",value:3},{name:"广东",value:4},{name:"云南",value:3}];
			var data = JSUtils.loadAjax({
				url:basePath+"/welcome/loadCityByUser.do",
				async:false
			})
			var markVal = [];
			var markLineData = [];
			var mapData = [],max=0,tips="";
			var nvalcol = "NSAS";
			$.each(data,function(i,v){
				var array=new Array()
				array.push({"name":v["name"],'value':v["value"],"type":v["type"]},{"name":city})
				markLineData.push(array);
				
				var markData = new Object();
				markData.name = v["name"];
				markData.value = v["value"];
				markData.coord = geoCoordMap[v["name"]];
				markVal.push(markData);
				tips = v["name"]+"<br>去过"+v["value"]+"次";
				if(v["name"] == city){
					tips = "我的故乡";
				}else if(v["type"] == "0"){
					tips = "想去"+v["name"];
				}
				mapData.push({"name":v["name"],'value':v["value"],"tips":tips});
				
				if(v["value"]>max){
					max = v["value"];
				}
			})
			echarts.registerMap(fydm, datas);
			mapOption = {
					backgroundColor:'#404a59',
					textStyle:{color:"#2863A9",fontSize:18},
					tooltip : {
						trigger: 'item',
						textStyle:{fontSize:16,align:'left'},
						formatter:function(param){
							return param['data']['tips'];
						}//'{b}<br>{a}:{c}'
					},
					geo:{
						map: fydm,aspectScale:1,zoom:1.2,selectedMode : 'single',
						label:{normal:{show:false,textStyle:{color:"#FFFFFF",fontSize:10}},emphasis:{show:true,textStyle:{color:"#FFFFFF"}}},
						itemStyle:{normal:{areaColor:"#323c48",borderColor: '#404a59'},emphasis:{areaColor:"#2a333d"}}
					},
					series: [{type: 'map',geoIndex:0,aspectScale:1,zoom:1.2,map:fydm,data:mapData,
							markPoint:{
							symbol:'pin',
							symbolOffset:[0,4],
							symbolSize:1,
							data:markVal,
							label:{normal:{show:true,position:'bottom',textStyle:{color:'#f6b400',fontSize:15,fontWeight:'bold'},formatter: function (param) {var v = '';v = param.data.value;return v;}}},
							itemStyle:{emphasis:{color:'#2B313D',label:{show:true,position:'inside',textStyle:{color:'#f6b400',fontSize:12,fontWeight:'bold'}}}}}	 
						},
						{
							 type : 'scatter',
							 coordinateSystem:'geo',
							 show : true,
							 data : cdata,
							 symbolSize : 15,
							 showEffectOn : 'render',
							 rippleEffect : {brushType : 'stroke'},
							 hoverAnimation : true,
							 label:{normal : {formatter:'{b}',position:'right',textStyle:{color:"#e4b60e",fontSize:13},show : true}},
							 itemStyle: {normal: {color: '#FFFFFF',shadowBlur: 10,shadowColor: '#FFFFFF',borderColor:'aqua',borderWidth:1.0}},
							 zlevel : 1,
							 animationDelay: function (idx) {
								 return idx * 300 + 100;
							 }
						}
					]
			};
			if(visualMap){
				mapOption['tooltip']['show'] = true;
				mapOption['visualMap'] = this.default_map_visualMap;
				mapOption['visualMap']['max'] = max;
			}
			mapOption.geo.label.normal.show = false;
			mapOption.geo.label.emphasis.show = false;
			mapOption.series = mapOption.series.concat(createSeries("我的足迹",markLineData));
			map.clear();
			map.setOption(mapOption);
			console.log(mapOption);
		});
	}
	
	var default_map_visualMap = {
		show:false,
		inRange: {
			color: ["#74C1F8","#3B8EDE","#104E8B","#1874CD","#1C86EE","#1E90FF","#009ACD","#00B2EE","#00E5EE","#00BFFF","#104E8B","#378ec7","#74C1F8","#3B8EDE",
			        "#104E8B","#1874CD","#1C86EE","#1E90FF","#009ACD","#00B2EE","#00E5EE","#00BFFF","#104E8B","#378ec7","#66FFFF", "#00FFFF", "#00CCFF", "#0099FF",
			        "#0066FF","#0066CC", "#006699", "#0033FF", "#003399", "#0000FF","#000099", "#000066"]
			//color: ["#ffc20e","#df9464","#dea32c","#d1923f","#c37e00","#c37e00","#e0861a"]
		}
	}
	
	var geoCoordMap = {
		
	}
})